<template>
	<!-- 他人主页 -->
	<view class="index-personaldetail">
		<scroll-view scroll-y="true">
			<view class="index-personaldetail-banner">
				<view class="index-personaldetail-banner-top">
					匹配度75%
				</view>
				<view class="index-personaldetail-banner-bottom u-flex">
					<view class="index-personaldetail-banner-bottom-left">
						世界美好又灰暗
					</view>
					<view class="index-personaldetail-banner-bottom-right" @click="jumpEgg()">
						<image src="../../../static/img/index/psonaldetail/egg.png" mode=""></image>
					</view>
				</view>
				<image class="index-personaldetail-banner-img" src="../../../static/img/demo1.png" mode="widthFix">
				</image>
			</view>
			<view class="index-personaldetail-info">
				<view class="index-personaldetail-info-item shadow-box">
					<view class="index-personaldetail-info-item-header u-flex u-row-between"
						style="border-bottom: 1rpx solid #F5F5F5FF;">
						<view class="index-personaldetail-info-item-header-left u-flex">
							<view class="index-personaldetail-info-item-header-left-item">
								是悠悠呀
							</view>
							<image src="../../../static/img/vip-icon.png"
								style="margin-right: 8rpx;width: 80rpx;height: 32rpx;" mode="">
							</image>
							<view class="vip-level">
								Lv6
							</view>
							<image src="../../../static/img/index/psonaldetail/id-check.png"
								style="width: 92rpx;height: 36rpx;" mode=""></image>
						</view>
						<view class="index-personaldetail-info-item-header-right">
							举报/屏蔽
						</view>
					</view>
					<view class="index-personaldetail-info-item-main u-flex">
						<view class="index-personaldetail-info-item-main-item u-flex" v-for="(item,index) in infolist">
							<view class="index-personaldetail-info-item-main-item-icon">
								<image :src="item.icon" mode=""></image>
							</view>
							<view class="index-personaldetail-info-item-main-item-title">
								{{item.title}}
							</view>
						</view>
					</view>
				</view>
				<view class="index-personaldetail-info-item shadow-box identification">
					<view class="index-personaldetail-info-item-header u-flex u-row-between">
						<view class="index-personaldetail-info-item-header-left u-flex">
							<view class="index-personaldetail-info-item-header-left-item">
								V认证：3/6
							</view>
						</view>
						<view class="index-personaldetail-info-item-header-right u-flex u-row-center">
							<image src="../../../static/img/index/psonaldetail/ta-pre.png"
								style="width: 24rpx;height: 24rpx;" mode=""></image>
							<view class="">
								真实度：90%
							</view>
						</view>
					</view>
					<view class="index-personaldetail-info-item-main u-flex">
						<view class="index-personaldetail-info-item-main-item u-flex"
							v-for="(item,index) in [1,1,1,1,1,1]">
							<view class="index-personaldetail-info-item-main-item-icon">
								<image src="../../../static/img/index/psonaldetail/ta-job-def.png" mode=""></image>
							</view>
							<view class="index-personaldetail-info-item-main-item-title">
								房产认证
							</view>
						</view>
					</view>
				</view>
				<view class="index-personaldetail-info-item shadow-box" @click="jumpTrends()">
					<view class="index-personaldetail-info-item-header u-flex u-row-between">
						<view class="index-personaldetail-info-item-header-left u-flex">
							<view class="index-personaldetail-info-item-header-left-item">
								TA的动态
							</view>
						</view>
						<view class="index-personaldetail-info-item-header-right u-flex u-row-center">

						</view>
					</view>
					<view class="index-personaldetail-info-item-main u-flex u-row u-flex-nowrap"
						style="flex-wrap: nowrap;">
						<view class="index-personaldetail-info-item-main-item u-flex" v-for="(item,index) in [1,1,1]">
							<view class="index-personaldetail-info-item-main-item-img">
								<image src="../../../static/img/demo1.png"
									style="width: 160rpx;height: 160rpx;border-radius: 16rpx;" mode=""></image>
							</view>
						</view>
						<view class="index-personaldetail-info-item-arrow">
							<image src="../../../static/img/arrow-right.png" style="width: 40rpx;height: 40rpx;"
								mode=""></image>
						</view>
					</view>
				</view>
				<view class="index-personaldetail-info-content shadow-box">
					<view class="index-personaldetail-info-content-header">
						关于我
					</view>
					<view class="index-personaldetail-info-content-item">
						<view class="index-personaldetail-info-content-item-title u-flex">
							<image src="../../../static/img/index/psonaldetail/title-icon.png"
								style="width: 16rpx;height: 16rpx;margin-right: 12rpx;" mode=""></image>
							<view class="">
								自我介绍
							</view>
						</view>
						<view class="index-personaldetail-info-content-item-main">
							<view class="">
								这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案
							</view>
							<image src="../../../static/img/demo.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="index-personaldetail-info-content-item">
						<view class="index-personaldetail-info-content-item-title u-flex">
							<image src="../../../static/img/index/psonaldetail/title-icon.png"
								style="width: 16rpx;height: 16rpx;margin-right: 12rpx;" mode=""></image>
							<view class="">
								家庭背景
							</view>
						</view>
						<view class="index-personaldetail-info-content-item-main">
							<view class="">
								这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案
							</view>
							<image src="../../../static/img/demo.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="index-personaldetail-info-content-item">
						<view class="index-personaldetail-info-content-item-title u-flex">
							<image src="../../../static/img/index/psonaldetail/title-icon.png"
								style="width: 16rpx;height: 16rpx;margin-right: 12rpx;" mode=""></image>
							<view class="">
								理想的TA
							</view>
						</view>
						<view class="index-personaldetail-info-content-item-main">
							<view class="">
								这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案
							</view>
							<image src="../../../static/img/demo.png" mode="widthFix"></image>
						</view>
					</view>
				</view>

				<view class="index-personaldetail-info-item tags shadow-box">
					<view class="index-personaldetail-info-item-header u-flex u-row-between">
						<view class="index-personaldetail-info-item-header-left u-flex">
							<view class="index-personaldetail-info-item-header-left-item">
								标签
							</view>
						</view>
						<view class="index-personaldetail-info-item-header-right u-flex u-row-center">

						</view>
					</view>
					<view class="index-personaldetail-info-item-main">
						<view class="index-personaldetail-info-item-main-item u-flex" v-for="(item,index) in [1,1,1]">
							标签
						</view>
					</view>
				</view>
				<view class="index-personaldetail-info-item mbtitest shadow-box">
					<view class="index-personaldetail-info-item-header u-flex u-row-between">
						<view class="index-personaldetail-info-item-header-left u-flex">
							<view class="index-personaldetail-info-item-header-left-item">
								MBTI测试
							</view>
						</view>
						<view class="index-personaldetail-info-item-header-right u-flex u-row-center">

						</view>
					</view>
					<view class="index-personaldetail-info-item-main">
						<view class="index-personaldetail-info-item-main-item u-flex" style="width: 100%;">
							测试结果：ESTP
						</view>
						<view class="index-personaldetail-info-item-main-item u-flex" style="width: 100%;">
							这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案这是文案
						</view>
					</view>
				</view>
			</view>
			<view class="index-personaldetail-float">

				<view class="index-personaldetail-float-item" @click="changePointPop()">
					<image src="../../../static/img/index/psonaldetail/point.png" style="height: 96rpx;width: 96rpx;"
						mode=""></image>
				</view>
				<view class="index-personaldetail-float-item">
					<image src="../../../static/img/index/psonaldetail/care.png" style="height: 96rpx;width: 96rpx;"
						mode=""></image>
				</view>
			</view>
			<view class="index-personaldetail-footer u-flex u-row-between u-row-center">
				<view class="index-personaldetail-footer-item public-btn  u-flex u-row-between u-row-center"
					style="background: #66ACFFFF;">
					<view class="index-personaldetail-footer-item-left">
						<image src="../../../static/img/index/psonaldetail/ta-good.png" mode=""></image>
					</view>
					<view class="index-personaldetail-footer-item-right">
						推给朋友
					</view>
				</view>
				<view class="index-personaldetail-footer-item public-btn  u-flex u-row-between u-row-center"
					style="background: #7266FFFF;">
					<view class="index-personaldetail-footer-item-left">
						<image src="../../../static/img/index/psonaldetail/ta-like.png" mode=""></image>
					</view>
					<view class="index-personaldetail-footer-item-right">
						想认识TA
					</view>
				</view>
			</view>
		</scroll-view>
		<u-popup mode="center" v-model="showPointPop" border-radius="20">
			<index-personal-getpoint></index-personal-getpoint>
		</u-popup>
	</view>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	import indexPersonalGetpoint from '../../../components/index-personal-getpoint/index-personal-getpoint.vue'
	export default {
		// 组件名称
		name: 'demo',
		// 组件参数 接收来自父组件的数据
		props: {},
		// 局部注册的组件,import引入的组件需要注入到对象中才能使用
		components: {
			indexPersonalGetpoint
		},
		// 组件状态值
		data() {
			return {
				showPointPop: false,
				infolist: [{
					id: 0,
					title: '97年',
					icon: '../../../static/img/index/psonaldetail/ta-birth.png'
				}, {
					id: 1,
					title: '175cm',
					icon: '../../../static/img/index/psonaldetail/ta-tall.png'
				}, {
					id: 2,
					title: '65kg',
					icon: '../../../static/img/index/psonaldetail/ta-heavy.png'
				}, {
					id: 3,
					title: '所在杭州',
					icon: '../../../static/img/index/psonaldetail/ta-adress.png'
				}, {
					id: 4,
					title: '家乡上海',
					icon: '../../../static/img/index/psonaldetail/ta-home.png'
				}, {
					id: 5,
					title: '本科',
					icon: '../../../static/img/index/psonaldetail/ta-edu.png'
				}, {
					id: 6,
					title: '旅游策划',
					icon: '../../../static/img/index/psonaldetail/ta-job.png'
				}, {
					id: 7,
					title: '10-20w',
					icon: '../../../static/img/index/psonaldetail/ta-pay.png'
				}, ]
			}
		},
		// 计算属性
		computed: {},
		// 侦听器
		watch: {},
		// 组件方法
		methods: {
			jumpTrends() {
				this.$Router.push({
					path: '/pages/index/index/index-personal-trends'
				})
			},
			jumpEgg() {
				this.$Router.push({
					path: '/pages/index/index/index-personal-egg'
				})
			},
			changePointPop() {
				this.showPointPop = true
			}
		},
		// 以下是生命周期钩子   注：没用到的钩子请自行删除
		/**
		 * 在实例初始化之后，组件属性计算之前，如data属性等
		 */
		beforeCreate() {},
		/**
		 * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
		 */
		created() {},
		/**
		 * 在挂载开始之前被调用：相关的 render 函数首次被调用。
		 */
		beforeMount() {},
		/**
		 * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
		 * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
		 */
		mounted() {},
		/**
		 * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
		 * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
		 */
		beforeUpdate() {},
		/**
		 * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
		 * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
		 */
		updated() {},
		/**
		 * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
		 */
		activated() {},
		/**
		 * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
		 */
		deactivated() {},
		/**
		 * 实例销毁之前调用。在这一步，实例仍然完全可用。
		 */
		beforeDestroy() {},
		/**
		 * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
		 * 所有的事件监听器会被移除，所有的子实例也会被销毁。
		 */
		destroyed() {}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<style scoped lang="scss">
	.index-personaldetail {
		background: #FAFAFAFF;
		height: 100%;

		&-banner {
			position: relative;
			overflow: hidden;

			&-img {
				width: 100%;
				display: block;
			}

			&-top {
				position: absolute;
				right: 32rpx;
				top: 32rpx;
				height: 72rpx;
				text-align: center;
				padding: 0 32rpx;
				background: rgba(0, 0, 0, 0.4);
				border-radius: 41rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				color: #FFFFFF;
				line-height: 72rpx;

			}

			&-bottom {
				position: absolute;
				bottom: 0;
				width: 100%;
				display: flex;
				justify-content: space-between;
				height: 96rpx;
				background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);

				&-left {
					margin-left: 32rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}

				&-right {
					image {
						width: 132rpx;
						height: 56rpx;
					}
				}
			}
		}

		&-info {
			padding: 32rpx;

			.vip-level {
				background: url(../../../static/img/level-bg.png);
				background-size: cover;
				margin-right: 8rpx;
			}

			&-item {
				padding: 32rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #2E3033;
				margin-right: 8rpx;
				margin-bottom: 40rpx;

				&-header {
					padding-bottom: 32rpx;


					&-left {
						&-item {}
					}

					&-right {
						font-size: 20rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
					}
				}

				&-main {
					flex-wrap: wrap;

					// &-item:nth-of-type(3n-1) {
					// 	justify-content: center;
					// }

					// &-item:nth-of-type(3n) {
					// 	justify-content: flex-end;
					// }
					// &-item:nth-of-type(3n-2) {
					// justify-content: flex-start;
					// }

					&-item {
						margin-top: 32rpx;
						width: 33%;

						&-icon {
							width: 40rpx;

							image {
								width: 28rpx;
								height: 28rpx;
							}
						}

						&-title {
							font-size: 26rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #2E3033;
						}
					}


				}
			}

			&-content {
				padding: 32rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #2E3033;
				margin-right: 8rpx;
				margin-bottom: 40rpx;
				background: #F8F9FE;

				&-header {
					margin-bottom: 32rpx;
				}

				&-item {
					margin-bottom: 32rpx;

					&-title {
						margin-bottom: 32rpx;
					}
				}
			}

			.identification {
				.index-personaldetail-info-item-header-right {
					position: relative;
					right: -32rpx;
					text-align: center;
					color: #FF516D;
					width: 220rpx;
					height: 40rpx;
					background: #F5F5F5;
					border-radius: 20rpx 0rpx 0rpx 20rpx;
				}

				.index-personaldetail-info-item-main {
					&-item {
						flex-direction: column;

						&-icon {
							width: 96rpx;

							image {
								width: 96rpx;
								height: 96rpx;
							}
						}
					}
				}

			}

			.tags {
				.index-personaldetail-info-item-main {}

				.index-personaldetail-info-item-main-item {
					padding: 0 32rpx;
					margin-top: 16rpx;
					width: auto;
					margin-right: 16rpx;
					display: inline-block;
					height: 48rpx;
					background: #F1EFFF;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #7266FF;
					text-align: center;
					line-height: 48rpx;
				}
			}
		}

		&-float {
			position: fixed;
			right: 32rpx;
			bottom: 120rpx;

			&-item {
				margin-bottom: 32rpx;
			}
		}

		&-footer {
			position: relative;
			padding: 0 70rpx;
			padding-bottom: 70rpx;

			&-item {
				width: 280rpx;
				height: 96rpx;
				justify-content: center;

				image {
					height: 32rpx;
					width: 32rpx;
				}

				&-right {
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FCFEFF;
				}
			}
		}
	}
</style>
